<template>
    <div class="vehicleView">
        <div class="top">
            <input type="text" v-model="input" placeholder="请输入车辆名称">
            <div class="find" @click="finding()">查询</div>
            <div class="reset">重置</div>
        </div>
        <div class="manage">
            <div @click="add">添加车辆</div>
            <div @click="batchDelete">批量删除</div>
        </div>
        <el-table ref="multipleTable" :data="compData" tooltip-effect="dark" style="width: 100%"
            :header-cell-style="{ backgroundColor: '#EEEEEE' }" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="100">
            </el-table-column>
            <el-table-column prop="images" label="车辆图片" width="220">
                <template slot-scope="scope">
                    <input type="text" v-model="scope.row.images" v-show="scope.row.iseditor" />
                    <!-- <img :src='scope.row.images' alt=""> -->
                    <img :src="scope.row.images">
                </template>

            </el-table-column>
            <el-table-column prop="name" label="车辆名称" width="200">
                <template slot-scope="scope">
                    <input type="text" v-model="scope.row.name" v-show="scope.row.iseditor" />
                    <span v-show="!scope.row.iseditor">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="车型" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    <input type="text" v-model="scope.row.type" v-show="scope.row.iseditor" />
                    <span v-show="!scope.row.iseditor">{{ scope.row.type }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="color" label="颜色" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    <input type="text" v-model="scope.row.color" v-show="scope.row.iseditor" />
                    <span v-show="!scope.row.iseditor">{{ scope.row.color }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="whatMuch" label="库存" width="300" show-overflow-tooltip>
                <template slot-scope="scope">
                    <input type="text" v-model="scope.row.whatMuch" v-show="scope.row.iseditor" />
                    <span v-show="!scope.row.iseditor">{{ scope.row.whatMuch }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog style=" width: 1000px;height: 1000px;position: fixed;left: 30%;" title="用户信息" :visible.sync="zdydialog">
            <el-form :model="form">
                <!-- <el-form-item label="车辆图片" width="80px">
                    <el-input class="dialog_input" v-model="form.images"></el-input>
                </el-form-item> -->
                <el-form-item label="车辆图片" prop="form">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model="form.images">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="form" slot-scope="{form}">
                            <img class="el-upload-list__item-thumbnail" :src="form.images" alt="">
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="车辆名称" width="80px">
                    <el-input class="dialog_input" v-model="form.name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="日期" width="80px">
                    <el-date-picker v-model="form.date" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="车型" width="80px">
                    <el-input class="dialog_input" v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="颜色" width="80px">
                    <el-input class="dialog_input" v-model="form.color"></el-input>
                </el-form-item>
                <el-form-item label="库存" width="80px">
                    <el-input class="dialog_input" v-model="form.whatMuch"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]" :page-size="40" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getCarList } from "@/api/index";

export default {
    name: "vehicleView",
    data() {
        return {
            currentPage: 1,
            pageSize: 5,//每页显示条数
            total: 0,
            currentPage1: 1,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            tableData: [
            ],
            multipleSelection: [],
            input: '',
            zdydialog: false,
            form: {},
        }
    },
    // created() {
    //     this.geyData() 

    // },
    computed: {
        compData() {
            return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)

        },
        // carlistArr() {
        //     let _car = this.carList.filter(car => {
        //         return !car.isdelete
        //     })
        //     // 判断搜索条件是否存在
        //     if (this.input) {
        //         _car = _car.filter(car => {
        //             return car.name.indexOf(this.input) >= 0;
        //         })
        //     }
        //     return _car;
        // }
    },
    methods: {
        // 获取数据
        async getCarList() {
            const _data = await getCarList();
            const _res = await (_data).data;
            // console.log(_res);
            this.tableData = _res,
            this.total = this.tableData.length
        },
       
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.currentPage = 1
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
        },
        // geyData() {
        //     this.total = this.tableData.length
        // },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询
        finding() {
            const input = this.input
            // console.log(input);
            if (input) {
                // console.log("input输入的搜索内容：" + this.input)
                this.tableData = this.tableData.filter(data => {
                    // console.log("object:" + Object.keys(data))
                    // console.log(data.name)
                    // let reSearch = data.name
                    return data.name.indexOf(input) > -1
                })
            }

        },
        // 批量删除
        batchDelete() {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.multipleSelection.forEach((item) => {
                        // console.log(item);
                        this.tableData = this.tableData.filter((i) => {
                            return i.id != item.id;
                        });
                    });
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        // 添加
        add() {
            this.form = {
                images: '',
                // images: require(''),
                name: '',
                type: '',
                color: '',
                whatMuch: '',
                iseditor: false,
            }
            this.submitType = "add";
            this.zdydialog = true
        },
        cancel() {
            this.zdydialog = false
        },
        submit() {
            //alert(this.form.date)
            // var ss = reformat(this.form.date)
            // alert(ss)
            this.zdydialog = false

            if (this.submitType == "add") {
                // this.form.date = reformat(this.form.date);
                this.tableData.push(this.form)
            }
        },

        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
            // this.form = this.tableData[index]
            this.submitType = "update";
            this.form = row
            this.zdydialog = true
        },
        // 删除
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
    },
    mounted() {
        this.getCarList()
    }
}
</script>

<style lang="less" scoped>
.vehicleView {
    width: 1250px;
    height: 800px;
    margin-left: 10px;
    padding: 30px;
    background-color: #fff;
    line-height: 0;

    img {
        width: 70px;
        height: 50px;
    }

    .top {
        display: flex;
        align-items: center;

        input {
            width: 200px;
            height: 40px;
            border: 1px #dcdfe6 solid;
            box-sizing: border-box;
            padding: 0 15px;
            margin-right: 20px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            outline-color: #409eff;

        }

        .find,
        .reset {
            width: 100px;
            height: 40px;
            background-color: #409eff;
            border-radius: 4px;
            margin-left: 20px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .reset {
            background-color: #fff;
            color: #000;
            border: #999 solid 1px;
            box-sizing: border-box;
        }
    }

    .manage {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;

        div {
            height: 18px;
            font-size: 18px;
            color: #409eff;
            line-height: 18px;
        }

        div:nth-child(1) {
            border-right: #409eff 2px solid;
            padding-right: 10px;
        }

        div:nth-child(2) {
            margin-left: 10px;
        }
    }

    .el-pagination {
        height: 60px;
        padding-top: 50px;
        text-align: right;
    }


}
</style>